<template>
  <div>
    <!-- 状态栏 -->
    <div style="background-color: #132144">
      <div class="flex justify-between">
        <div
          class="back"
          style="cursor: pointer"
          @click="
            () => {
              $router.go(-1)
            }
          "
        >
          <i class="el-icon-arrow-left" />
          <span v-if="developer.developerType === 1">
            {{ developer.contactName }}
          </span>
          <span v-if="developer.developerType === 2">
            {{ developer.firstName }}
          </span>
        </div>
      </div>
      <el-tabs v-model="activeTab" class="dark-tab" @tab-click="tabClickHandle">
        <el-tab-pane
          v-if="status === 1"
          :label="$t('operator.overview')"
          name="overview"
        />
        <el-tab-pane :label="$t('operator.account')" name="account" />
      </el-tabs>
    </div>
    <div style="position: relative; top: -90px">
      <div v-if="activeTab === 'overview'">
        <overview ref="overviewTab" />
      </div>
      <div v-if="activeTab === 'account'">
        <account></account>
      </div>
    </div>

    <el-dialog
      :visible="this.remarkVisible"
      :title="$t('contact.edit_remark')"
      width="500px"
      @close="cancelRemark"
    >
      <el-form
        ref="remarkForm"
        :rules="rules"
        size="small"
        :model="remarkForm"
        label-width="100px"
      >
        <el-form-item :label="$t('contact.remark')" prop="remark">
          <el-input
            v-model="remarkForm.remark"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 10 }"
            maxlength="256"
            show-word-limit
            clearable
            @blur="() => (remarkForm.remark = remarkForm.remark.trim())"
          />
        </el-form-item> </el-form
      ><template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="cancelRemark">{{
            $t('common.cancel')
          }}</el-button>
          <el-button
            type="primary"
            size="small"
            :loading="isdisabled"
            @click="submitRemark()"
            >{{ $t('common.confirm') }}
          </el-button>
        </span></template
      >
    </el-dialog>
  </div>
</template>

<script>
import { updateRemark } from '@/api/developer'
import Overview from './components/overview.vue'
import Account from './components/account.vue'

export default {
  components: { Overview, Account },
  data() {
    return {
      activeTab: 'overview',
      developerId: this.$route.params.developerId,
      developer: null,
      status: 1,
      remarkForm: {
        remark: '',
        developerId: ''
      },
      isdisabled: false,
      remarkVisible: false,
      rules: {
        remark: [
          {
            required: true,
            message: this.$t('contact.remark_not_null_tip'),
            trigger: ['blur']
          }
        ]
      }
    }
  },
  created() {
    this.developer = JSON.parse(localStorage.getItem('developer-info'))
    this.status = this.developer.status
    this.remarkForm.remark = this.developer.remark
    this.remarkForm.developerId = this.developer.developerId
    if (this.status === 1) {
      this.activeTab = 'overview'
    } else {
      this.activeTab = 'account'
    }
  },
  methods: {
    cancelRemark() {
      this.$refs['remarkForm'].resetFields()
      this.remarkForm.remark = this.developer.remark
      this.remarkVisible = false
      this.isdisabled = false
    },
    submitRemark() {
      this.$refs['remarkForm'].validate((valid) => {
        this.isdisabled = true
        if (valid) {
          updateRemark(this.remarkForm)
            .then((data) => {
              this.$message.success(this.$t('common.operate_success'))
              this.developer.remark = this.remarkForm.remark
              this.remarkVisible = false
              this.isdisabled = false
            })
            .catch((e) => {
              this.isdisabled = false
              this.$confirmError(e)
            })
        }
      })
    },
    tabClickHandle(tab, event) {
      // if (tab.name === 'overview') {
      //   this.$nextTick(() => {
      //     this.$refs.overviewTab.init(this.operator)
      //   })
      // }
      // if (tab.name === 'account') {
      //   this.$nextTick(() => {})
      // } else if (tab.name === 'profile') {
      //   this.$nextTick(() => {})
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.back {
  color: #ffffff;
  font-size: 20px;
  margin: 20px;
}
.level-btn {
  background: #2a3757;
  color: #ffffff;
  border: none;
  margin: 20px;
  max-width: 350px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dark-tab {
  margin: 0 20px;
  padding-bottom: 100px;
  ::v-deep .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #677796;
    z-index: 1;
  }
  ::v-deep .el-tabs__item {
    color: #677796;
    line-height: 21px;

    &:hover {
      color: #ffffff;
    }

    &.is-active {
      color: #ffffff;
    }
  }

  ::v-deep .el-tabs__item.is-top:nth-child(2) {
    padding-left: 20px;
  }
}
</style>
